@import "compass/reset";
@import "compass";
@import url(http://fonts.googleapis.com/css?family=Pontano+Sans);

/**************************************\
			   COLORS
\**************************************/

/* PRIMARY COLORS*/

$primary1:#FFA500;
$primary2:#BF8D30;
$primary3:#A66C00;
$primary4:#FFBC40;
$primary5:#FFCE73;


/* COMPLIMENTARY COLORS*/

$complimentary1:#1047AA;
$complimentary2:#29477F;
$complimentary3:#052A6E;
$complimentary4:#4577D4;
$complimentary5:#6b90D4;


/**************************************\
			   FONTS
\**************************************/

$fontMonotype:UbuntuMonoRegular;
$fontBold:UbuntuBold;
$fontNormal:UbuntuRegular;
$fontItalic:UbuntuItalic;

/**************************************\
			PAGE DEFINITIONS
\**************************************/

@page {
	margin-bottom: 1cm;
	margin-left:   1.5cm;
	margin-right:  1.5cm;
	margin-top:    1cm;
	padding-top:   0.5cm;
	size: A4;
	font-size:1em;
	line-height:1.2em;
	font-family: OpenSansRegular;
	
	
	@bottom-right {
		content: "Seite " counter(page) " von " counter(pages);
		border-top:1px solid silver;
		font-size:80%;
		color:gray;
		margin-bottom: 15px;
	}
	@top-center {
		content: normal;
	}
	@bottom-center {
		content: "ITSysAdminFwWebSK";
		border-top:1px solid silver;
		font-size:80%;
		margin-bottom: 15px;		
		color:gray;
	}
	@bottom-left {
		content: "HF Weidinger - L Siegerth";
		border-top:1px solid silver;
		font-size:80%;
		color:gray;
		margin-bottom: 15px;		
	}
	@top-right{
		content: string(chapter) " :: " string(section); //PRINTS THE TITLE OF THE CHAPTER
		color:gray;
		border-bottom:1px solid silver;
		font-size:90%;
		padding-top:10px;
	}
	@top-left {
		border-bottom:1px solid silver;
		padding-top:10px;
		font-size:90%;
		color:gray;
	}
}

/**************************************\
			   ELEMENTS
\**************************************/

ol {
	list-style: decimal;
	margin-bottom: 10px;
	margin-top: 10px;
}
ul {
	list-style: square;
	margin-bottom: 10px;
	margin-top: 10px;	
}
li {
	margin-left: 25px;
}

a{
	text-decoration: none;
	color:#000;
}
caption {
	display:block;
	font-size: 80%;
	margin-bottom: 3px;
	text-align:center;
}
table {
	tr {
		
	}
	td {
		border: 1px solid $complimentary5;
	}
	th {
		border: 1px solid $complimentary4;
		background-color: $primary4;
	}
}

/**************************************\
			  TITLE PAGE
\**************************************/

@page :first {
    @top-center {
        content: normal;
    }
    @bottom-right {
        content: normal;
    }
   	@bottom-left {
   		content: normal;
   	}
   	@top-left {
	   	content: normal;
   	}
   	@top-right {
	   	content: normal;
   	}
}

.titlepage {
	page-break-after:always;
	text-align: center;
}

/**************************************\
			  	 BODY
\**************************************/

body {
	text-align: justify;
	font-family: $fontNormal;
	font-size:1em;
	line-height:1.2em;
}

/**************************************\
			  	 TOC
\**************************************/

ul.toc, ul.toc ul {
	list-style-type:none;
}

.toc ul {
	margin:0px;
}
.toc li.chapter a,.toc li.section a {
	font-family:$fontNormal;
}

.toc ul ul {
	margin-left: 27px;
}

.toc li a.PageRef::after {
	content: " " leader(".  ") "" target-counter(attr(href, url), page);
}

.toc li.chapter {
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	border-bottom:1px solid gray;
	padding-bottom:4px;
}
.toc li.chapter a{
	//font-weight:bold;
	font-size:120%;
}

.toc li.section {
	margin-bottom: 0.5em;
	margin-top: 0.5em;
}

.toc li.article {
	margin-bottom: 0.4em;
	margin-top: 0.4em;
}


.toc li.chapter a.PageRef::after{
	content: " " leader(" ") "" target-counter(attr(href, url), page);
}

.toc li.chapter a::before {
	content: target-counter(attr(href, url), chapter) " ";
}

.toc li.section a::before {
	content: target-counter(attr(href, url), chapter) "." target-counter(attr(href, url), section) " ";
}
.toc li.article a::before {
	content: target-counter(attr(href, url), chapter) "." target-counter(attr(href, url), section) "." target-counter(attr(href, url), article) " ";
}
/**************************************\
			   COUNTERS
\**************************************/


body {
	counter-reset: chapter;
	counter-reset: section;
	counter-reset: article;
	counter-reset: caption;
}
article {
	counter-increment: article;
}

section {
	counter-increment: section;
	counter-reset: article;
}

.chapter {
	counter-increment: chapter;
	counter-reset: section;
	counter-reset: caption;
}

caption {
	counter-increment: caption;
}

div.chapter {
	page-break-before:always;
}

.chapter h1::before {
	content: counter(chapter) " ";
}

.chapter h2::before {
	content: counter(chapter) "." counter(section) " ";
}

.chapter h3::before {
	content: counter(chapter) "." counter(section) "." counter(article) " ";
}

caption:after {
	content: " " counter(chapter) "." counter(caption);
}

/**************************************\
			   HEADINGS
\**************************************/

h1 {
	string-set: chapter content();
	margin-top:250px;
	color:$primary1;
	font-size:2em;
	margin-bottom: 1.9em;
	border-bottom: 1px solid gray;
	line-height: 2em;
	page-break-before:always;
}
h2 {
	string-set: section content();
	margin-top: 1.6em;
	margin-bottom: 1.6em;
	font-size:1.7em;
	color:$primary2;
}
h3 {
	string-set: subSection content();
	margin-top: 0.8em;
	margin-bottom: 1.3em;
	font-size:1.3em;
	color:$primary3;
}

h1,h2,h3 {
	font-family: $fontNormal;
}

/**************************************\
			   IMAGES
\**************************************/

img {
	border:3px solid $complimentary1;
	@include box-shadow(1px 1px 5px $complimentary2);
	width:350px;
}



/**************************************\
GESHI - (CODE WITH SYNTAX HIGHLIGHTING)
\**************************************/

.geshi {
	pre {
		font-family: $fontMonotype;
		background-color: white;
		@include border-radius(2px);
		@include box-shadow(inset 2px 2px 2px #ccc,#ccc 1px 1px 2px);
		min-height: 55px;
		padding:5px 10px 5px 0px;
		overflow: hidden;
		border:1px solid #ccc;
		position:relative;
		font-size: 13px;
		ol {
			list-style: decimal;
			margin-left: 30px;
			margin-top: 0px;
			margin-bottom: 0px;
		}
		li {
			border-left:1px solid silver;
			padding-left:5px;
			margin-left: 0px;
		}
		&:after {
			font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;
			position: absolute;
			top:20px;
			right: -50px;
			width: 150px;
			height: 25px;
			line-height: 25px;
			font-size: 1.2em;
			font-weight: bold;
			color: #fff;
			content:"CODE";			
			background: orange;
			text-align: left;
			padding-left: 45px;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		    @include box-sizing(border-box);
		}
		&.php {
			&:after {
				content:"PHP";
			}
			color:#555;
			a {
				color:rgb(60,76,114);
				color:blue;
			}
			.de1 {
			    color:#555;
			} 	
			.br0 {
				color:black;
			}
			.re0 { //Variable
				color:rgb(49,132,149);
			}
			.sy0,.sy1 {
				color:blue;
			}
			.st0 {
				color:rgb(3,106,7);
			}
			.nu0 { //WERT einer Variable
		
			}
			.co1,.co2,.coMULTI {
				color:rgb(255,127,0);
			}
			.kw1 {
				color:blue;
			}
			.kw2 {
				color:blue;
			}
			.st_h {
			    color:green;
			}              
		}//php
		&.html5 {
			&:after {
				content:"HTML5";
			}
			.imp {font-weight: bold; color: orange;}
			.kw2 {     //TAG    	 
				color:rgba(65,105,225, 1.0);
				font-weight: bold;}
			.kw3 {      //attribute
				color:rgba(65,105,225, 1.0);
				font-style:italic;
			}
			.es0 {
				color:rgba(65,105,225, 1.0);
				font-weight: bold;
			}
			.br0 {
				color:rgba(65,105,225, 1.0);
			}
			.sy0 { //ZEICHEN
				color:rgba(65,105,225, 0.7);
			}
			.st0 {     //VALUE
				color:green;
			 }
			.nu0 {color: red;}
			.sc-2 {color: red;}
			.sc-1 {color: red; font-style: italic;}
			.sc0 {color: red;}
			.sc1 {color: red;}
			.sc2 { //BRACKETS
				color:rgba(65,105,225, 0.7);
			}
			span.xtra { display:block; }
		}//html5	
		&.css  {
			&:after {
				content:"  CSS"
			}
			color:black;	
			.imp {font-weight: bold; color: red;}
			.kw1 {
				color:rgba(65,105,225, 0.7);
				font-weight: bold;
			}
			.kw2 { //VALUE
				color: green;
			}
			.co1 {color: orange;}
			.co2 {color: fuchsia; font-style: italic;}
			.coMULTI {color: #808080; font-style: italic;}
			.es0 {color: fuchsia; font-weight: bold;}
			.es2 {color: fuchsia; font-weight: bold;}
			.br0 { //BRACKETS
				color: black;}
			.sy0 { //SEMIKOLON
				color: black;}
			.st0 {color: black;}
			.nu0 { //ColorValues rgba
				color: rgb(197,6,11);}
			.re0 {color: black;}
			.re1 { //classes
				color: black;
				font-style:italic;}
			.re2 { //font-family Value
				color: black;}
			.re3 { //Pixel Value
				color: blue;}
			span.xtra { display:block; }
		}//css	
	}//pre
}//geshi